<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Home</title>
    <link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->

    <!-- Custom Theme files -->
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modernizr.custom.js"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <!--webfont-->
    <!--<link href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>-->
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
            });
        });
    </script>

    <script>
        $(function(){
            $(".hov").hide();
            $(".text").hide();
            $(".col-md-3").hover(
                    function()
                    {
                        $(this).find(".hov").stop().fadeTo(286,0.5);
                        $(this).find(".text").stop().show();
                    },
                    function()
                    {
                        $(this).find(".hov").stop().fadeTo(286, 0);
                        $(this).find(".text").stop().hide();
                    });
        });

    </script>
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
            });
        });

        function change(n,id){
            if(n%2==1){
                document.getElementById('l'+(n+1)).style.display="inline";
                document.getElementById('l'+n).style.display="none";


            }
            if(n%2==0){
                document.getElementById('l'+n).style.display="none";
                document.getElementById('l'+(n-1)).style.display="inline";
            }
        }

    </script>
    <style>

        h2
        {
            font-weight: 700;

        }
        h2 span
        {
            color: #ff5656;
        }
        .container1
        {
            padding: 60px 0;
            text-align: center;
        }
        .thumbnail {
            max-height:190px;
            min-height:190px;
            overflow:hidden;
            bottom:0;
            margin:0;
            padding: 0;
        }
    </style>
</head>
<body>
<!-- header-section-starts -->
<div class="navigation-strip">
    <div class="container">
        <div class="nav_content">
            <div class="home">
                <a href="index.html"><img src="images/imangine.png" alt="" /></a>
            </div>

            <div class="reglogbar-user pull-right">
                <div class="userp">
                    <a href="personal.html"> <span>Jully Coco &nbsp;</span> </a>
                    <a href="personal.html"> <img src="images/user-p.png" /> </a>
                </div>
            </div>
            <span class="menu"></span>
            <div class="top-menu">
                <ul>
                    <li><a href="pic.html">Picture</a></li>
                    <li><a href="album.html">Album</a></li>
                    <li><a href="group.html">Group</a></li>
                    <li><a class="active" href="search.html">Search</a></li>
                    <li><a href="about.html">About us</a></li>
                    <div class="clearfix"></div>
                </ul>
            </div>
            <!-- script for menu -->
            <script>
                $( "span.menu" ).click(function() {
                    $( ".top-menu" ).slideToggle( "slow", function() {
                        // Animation complete.
                    });
                });
            </script>
            <!-- script for menu -->
            <div class="clearfix"></div>
        </div>
    </div>
</div>




<div class="content">
    <div class="container1">
       <h2>Searching For <span>Imagination</span></h2>
        <div class="container1">
            <form role="form" class="form1">
                <input type="text"  id="name" placeholder="Animation, Sport, Fashion...">
                <br/>
                <br/>
                <button type="submit" class="btn btn-default">Search</button>
            </form>
        </div>
    </div>
    <div class="container">
        <div class="gallary">
            <div class="row">
                <div class="col-md-2 gal"><a href="#" class="thumbnail"><img  class="g1" src="images/g1.jpg"></a></div>
                <div class="col-md-2 gal"><a href="#" class="thumbnail"><img  class="g2" src="images/g2.jpg"></a></div>
                <div class="col-md-2 gal"><a href="#" class="thumbnail"><img  class="g3" src="images/g3.jpg"></a></div>
                <div class="col-md-2 gal"><a href="#" class="thumbnail"><img  class="g4" src="images/g4.jpg"></a></div>
                <div class="col-md-2 gal"><a href="#" class="thumbnail"><img  class="g5" src="images/g5.jpg"></a></div>
                <div class="col-md-2 gal"><a href="#" class="thumbnail"><img class="g6" src="images/g6.png"></a></div>
            </div>
        </div>
    </div>

</div>
<div class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="col-md-4 footer-grid">
                <h5>ABOUT US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor nulla, sodales quis posuere quis, tristique nec libero. Proin vitae convallis odio. Morbi nec enim nisi. Aliquam erat volutpat. </p>
            </div>
            <div class="col-md-4 footer-grid">
                
            </div>
            <div class="col-md-4 footer-grid">
                <h5>FOLLOW US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor! </p>


            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="copyrights">
                <p>Copyright &copy; 2015.Imangine All rights reserved.</p>
            </div>
            <div class="go-top">
                <a href="#header" class="scroll"><img src="images/go-to-top.png" alt="" /></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

</body>
</html>